{%- extends "basic/layout.html" %}

{# Do this so that bootstrap is included before the main css file #}
{%- block htmltitle %}

<script>
  // Render blocking JS:
  if (localStorage.theme) document.documentElement.setAttribute("data-theme", localStorage.theme);
  </script>

  <link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

  <!-- Material Design Bootstrap -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.14/css/mdb.min.css" rel="stylesheet">

  <!-- Dark css switch -->
  <link rel="stylesheet" type="text/css" href="{{ pathto('_static/css/dark-mode.css?v=1.1', 1.3) }}" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
       "HTML-CSS": { scale: 90, linebreaks: { automatic: true } },
       TeX: {
         Macros: {
           pr : ['|\#1\\rangle\\langle\#1|',1],
           ket: ['\\left| \#1\\right\\rangle',1],
           bra: ['\\left\\langle \#1\\right|',1],
           xket: ['\\left| \#1\\right\\rangle_x',1],
           xbra: ['\\left\\langle \#1\\right|_x',1],
           braket: ['\\langle \#1 \\rangle',1],
           braketD: ['\\langle \#1 \\mid \#2 \\rangle',2],
           braketT: ['\\langle \#1 \\mid \#2 \\mid \#3 \\rangle',3],
           ketbra: ['| #1 \\rangle \\langle #2 |',2],
           hc: ['\\text{h.c.}',0],
           cc: ['\\text{c.c.}',0],
           h: ['\\hat',0],
           nn: ['\\nonumber',0],
           di: ['\\frac{d}{d \#1}',1],
           uu: ['\\mathcal{U}',0],
           inn: ['\\text{in}',0],
           out: ['\\text{out}',0],
           vac: ['\\text{vac}',0],
           I: ['\\hat{\\mathbf{1}}',0],
           x: ['\\hat{x}',0],
           p: ['\\hat{p}',0],
           a: ['\\hat{a}',0],
           ad: ['\\hat{a}^\\dagger',0],
           n: ['\\hat{n}',0],
           nbar: ['\\overline{n}',0],
           sech: ['\\mathrm{sech~}',0],
           tanh: ['\\mathrm{tanh~}',0],
           re: ['\\text{Re}',0],
           im: ['\\text{Im}',0],
           tr: ['\\mathrm{Tr} #1',1],
           sign: ['\\text{sign}',0],
           overlr: ['\\overset\\leftrightarrow{\#1}',1],
           overl: ['\\overset\leftarrow{\#1}',1],
           overr: ['\\overset\rightarrow{\#1}',1],
           avg: ['\\left< \#1 \\right>',1],
           slashed: ['\\cancel{\#1}',1],
           bold: ['\\boldsymbol{\#1}',1],
           d: ['\\mathrm d',0],
           expect: ["\\langle #1 \\rangle",1],
           pde: ["\\frac{\\partial}{\\partial \#1}",1],
           R: ["\\mathbb{R}",0],
           C: ["\\mathbb{C}",0],
           Ad: ["\\text{Ad}",0],
           Var: ["\\text{Var}",0],
           bx: ["\\mathbf{x}", 0],
           bm: ["\\boldsymbol{\#1}",1]
         }
       }
     });
     </script>

  {%- block ga %}
    {%- if theme_google_analytics_account %}
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id={{ theme_google_analytics_account }}"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', '{{ theme_google_analytics_account }}');
      </script>
    {%- endif %}
  {%- endblock %}
  {{ super() }}
{%- endblock %}

{# Displays the URL for the homepage if it's set or the master_doc if it is not #}
{% macro homepage() -%}
  {%- if theme_homepage %}
    {%- if hasdoc(theme_homepage) %}
      {{ pathto(theme_homepage) }}
    {%- else %}
      {{ theme_homepage }}
    {%- endif %}
  {%- else %}
    {{ pathto(master_doc) }}
  {%- endif %}
{%- endmacro %}

{# Displays the URL for the tospage if it's set or falls back to homepage macro #}
{% macro tospage() -%}
  {%- if theme_tospage %}
    {%- if hasdoc(theme_tospage) %}
      {{ pathto(theme_tospage) }}
    {%- else %}
      {{ theme_tospage }}
    {%- endif %}
  {%- else %}
    {{ homepage() }}
  {%- endif %}
{%- endmacro %}

{# Displays the URL for the projectpage if it's set or falls back to homepage macro #}
{% macro projectlink() -%}
  {%- if theme_projectlink %}
    {%- if hasdoc(theme_projectlink) %}
      {{ pathto(theme_projectlink) }}
    {%- else %}
      {{ theme_projectlink }}
    {%- endif %}
  {%- else %}
    {{ homepage() }}
  {%- endif %}
{%- endmacro %}

{# Displays the next and previous links both before and after content #}
{% macro render_relations() -%}
  {% if prev or next %}
  <div class="footer-relations">
    {% if prev %}
      <div class="pull-left">
        <a class="btn" href="{{ prev.link|e }}" title="{{ _('previous chapter')}} (use the left arrow)"><i class="fas fa-arrow-left"></i> Previous</a>
      </div>
    {% endif %}
    {%- if next and next.title != '&lt;no title&gt;' %}
      <div class="pull-right">
        <a class="btn" href="{{ next.link|e }}" title="{{ _('next chapter')}} (use the right arrow)">Next <i class="fas fa-arrow-right"></i></a>
      </div>
    {%- endif %}
    </div>
    <div class="clearer"></div>
  {% endif %}
{%- endmacro %}

{%- macro guzzle_sidebar() %}
  <div id="left-column" class="nano css-transitions-only-after-page-load">
    <div class="sphinxsidebar nano-content">
      {%- if sidebars != None %}
        {#- new style sidebar: explicitly include/exclude templates #}
        {%- for sidebartemplate in sidebars %}
        {%- include sidebartemplate %}
        {%- endfor %}
      {% else %}
        {% include "searchbox.html" %}
        {% include "globaltoc.html" %}
      {%- endif %}
    </div>
  </div>
{%- endmacro %}

{%- block header -%}
  {% include "header.html" %}
{%- endblock %}

{%- block content %}

  {%- if pagename == 'index' and theme_index_template %}
    {% include theme_index_template %}
  {%- else %}
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-xl-2">
       {% include "globaltoc.html" %}
      </div>
      <div class="col-md-9 col-xl-8 py-md-3 pl-md-3 main-dc">

        {%- block document_wrapper %}
        {%- block document %}

        <div id="content">

            <!--Breadcrumbs-->
            {% block breadcrumbs %}
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                  <a href="{{ pathto(master_doc) }}">
                      {{ shorttitle|e }}
                  </a>
              </li>
              {%- for parent in parents %}
              <li class="breadcrumb-item">
                  <a href="{{ parent.link|e }}"
                     {% if loop.last %}
                         {{ accesskey("U") }}
                         class="active"
                     {% endif %}>
                     {{ parent.title }}
                  </a>
              </li>
              {%- endfor %}
              <li class="breadcrumb-item active">{{ title }}</li>
          </ol>
            {% endblock %}

            <div class="document clearer body">

              {% block body %} {% endblock %}
            </div>



        </div>

        {%- endblock %}
      {%- endblock %}

      </div>
      <!--right navigation-->
      <div class="d-none d-xl-block col-xl-2">

        {% include "localtoc.html" %}

      </div>
    </div>
  </div>

  {%- endif %}
  {%- endblock %}

{%- block footer %}

<script type="text/javascript">
  $("#mobile-toggle").click(function () {
    $("#sidebar").toggle("slide");
  });

  $("#menu-toggle").click(function () {
    $("#mobile-menu").toggle("slide");
  });
</script>


<!-- JQuery -->
<script>
  const toggleSwitch = document.querySelector('#dark-mode-button input[type="checkbox"]');

  if (localStorage.theme) {
    toggleSwitch.checked = localStorage.theme === "dark";
  }

  function switchTheme(e) {
    const theme = e.target.checked ? "dark" : "light";
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.theme = theme;
  }

  toggleSwitch.addEventListener("change", switchTheme);
  </script>

<script type="text/javascript" src="{{ pathto('_static/js/dark-mode-switch.min.js', 1) }}"></script>

<script src="https://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/js/mdb.min.js"></script>

<script type="text/javascript" src="{{ pathto('_static/js/nanoscroller.min.js', 1) }}"></script>



<script type="text/javascript">jQuery.noConflict(true);</script>

{%- endblock %}
